<template>
  <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="formData"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
  >
    <el-form-item label="名称：" prop="name">
      <el-input v-model="formData.name" placeholder="请输入名称" />
    </el-form-item>
    <el-form-item label="性别：" prop="sex">
      <el-radio-group v-model="formData.sex">
        <el-radio value="1">男</el-radio>
        <el-radio value="2">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
        v-for="(item, index) in formData.list"
        :key="index"
        :label="'item' + index"
        :prop="'list.' + index + '.schoolTitle'"
        :rules="{
        required: true,
        message: 'domain can not be null',
        trigger: 'blur',
      }"
    >
      <el-input v-model="item.schoolTitle" />
      <el-button class="mt-2" @click="deleteRow(index)">
        删除
      </el-button>
    </el-form-item>
    <el-button @click="addSchool">新增教育经历</el-button>
  </el-form>

  <el-form-item>
    <el-button type="primary" @click="onSubmit">提交</el-button>
    <el-button @click="resetData">重置</el-button>
  </el-form-item>
</template>

<script>
export default {
  data(){
    return{
      formData: {
        name: '',
        sex: '1',
        list: [
          {
            schoolTitle: '',
          }
        ]
      },
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }]
      }
    }
  },
  methods: {
    onSubmit(){
      this.$refs.ruleFormRef.validate(valid => {
        if (valid){
          this.$message.success('提交成功')
          this.resetData()
        }
      })
    },
    resetData(){
      this.formData.name = ''
      this.formData.sex = '1'
      this.formData.list = [{schoolTitle: ''}]
    },
    addSchool(){
      this.formData.list.push({schoolTitle: ''})
    },
    deleteRow(index){
      this.formData.list = this.formData.list.splice(index + 1, 1)
    }
  },
}
</script>